<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>YouTube | Livestream Gadget</title>
	<style type="text/css">
		html, body { margin: 0; padding: 0; font-family: "Helvetica", "Arial", "sans-serif"; background-color: transparent; }
		div.block { margin: 0; padding: 0; }
		div.block iframe { border: none; }
		div.player { float: left; width: 640px; height: 390px; }
		div.playlist { float: right; width: 330px; height: 390px; margin: 0 auto; }
		div.promo { float: right; width: 410px; height: 390px; margin: 0 auto; }
		div.social { float: left; width: 560px; height: 390px; }
	</style>
</head>
<body>
<!-- top half -->
<div style="width: 970px; margin: 0 auto;">
	<div class="block player" id="block-player"><iframe src="/b/player{{ querystring|escape }}" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%"></iframe></div>
	<div class="block playlist" id="block-playlist"><iframe src="/b/playlist{{ querystring|escape }}" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%"></iframe></div>
</div>
<!-- bottom half -->
<div style="width: 970px; margin: 0 auto;">
	<div class="block promo" id="block-promo"><iframe src="/b/promo{{ querystring|escape }}" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%"></iframe></div>
	<div class="block social" id="block-social"><iframe src="/b/social{{ querystring|escape }}" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%"></iframe></div>
</div>
<!-- javascript to update the blocks on demand -->
<script type="text/javascript" src="/static/update.js"></script>
</body>
</html>
